<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js对象中的无序的属性的集合
        var user={
            name:"tom",
            age:20,
            sex:"男"
        };
        // ES6对象的解构是通过对象属性名的方式进行取值
        // 基本解构(不完全解构)
            // 1.根据属性名取出对象中对应的值
            // 2.以属性名作为新变量进行赋值定义
        // let {name,age}=user;
        // let {age,name}=user;
        // console.log(name,age);
        //1.完全解构
        // let {name,age,sex}={name:"alice",age:20,sex:"女"};
        // console.log(name,age,sex);

        // 2.重命名解构
        let users={
            nameA:"jack",
            age:34,
            sex:"male"
        };
        // let {name,age}=users;
        //   模式   变量名
        let {nameA:username,age:ageOld}=users;
        console.log(username,ageOld);

        // 3.剩余解构
        // 将剩余的key=value参数合并成一个新的对象
        // 剩余解构的语法必须位于解构表达式中的最后一位
        let objs={
            a:"a",
            b:"b",
            c:"c",
            d:"d"
        };
        // let {a,...stu,c}=objs;//语法错误
        let {a,c,...stu}=objs;
        console.log(a,c,stu);

        //4.默认值解构
        var objs2={
            e:"e",
            f:"f"
        };
        //变量h设置了默认值，所以获取的是默认值
        let {g,h="嘿嘿",e:ee,i:i2}=objs2;
        console.log(g,h,ee,i2);

        //5.对象多层解构
        let data={
            status:true,
            msg:"嘿嘿，我是消息",
            film:{
                fname:"唐人街探案",
                fyear:"2020",
                ftype:"悬疑"
            }
        };
        // let {status,film}=data;
        // console.log(status,film);

        let {status,film,film:{fname}}=data;
        console.log(status,film,fname);

        let dataA={
            statusA:true,
            msg:"嘿嘿，我是消息",
            list:[
                {a:1,b:2},
                {a:3,b:4},
                {a:5,b:6},
            ]
        };
        let {statusA,list:[,aaa]}=dataA;
        // let {statusA,list:[,aaa],list:[,{b}]}=dataA;
        console.log(statusA,aaa);

        let dataB=[
                {aa:1,bb:2},
                {aa:3,bb:4},
                {aa:5,bb:6},
            ];
       
        let [,{bb}]=dataB;
        console.log(bb);


        // 6.为以定义的变量进行对象解构赋值
        //    还没有被浏览器完全兼容
        let a1;
        let b1;
        let c1={
            a1:"我是变量aaa",
            b1:"我是变量bbb"
        };
        ({a1,b1}=c1);
        console.log(a1,b1);

        
    </script>
</head>
<body>
    
</body>
</html>